<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html class="no-js">

<head>
    <title>Admin Home Page</title>


    <!-- Bootstrap -->
    <link href="${ctx}/static/master/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="${ctx}/static/master/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
    <link href="${ctx}/static/master/vendors/easypiechart/jquery.easy-pie-chart.css" rel="stylesheet" media="screen">
    <link href="${ctx}/static/master/assets/styles.css" rel="stylesheet" media="screen">
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <![endif]-->
    <script src="${ctx}/static/master/vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>

<body>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid" style="height: 50px;">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">LOG</a>

            <div class="nav-collapse collapse">
                <ul class="nav pull-right">
                    <li class="dropdown">
                        <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="icon-user"></i>
                            您好，超级管理员！
                            <i class="caret"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a tabindex="-1" href="#">Profile</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a tabindex="-1" href="#">Logout</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav" style="top: 10px">
                    <span style="font-size: xx-large; font-family: 'Microsoft YaHei',serif;">长沙XXXX有限责任公司</span>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row-fluid">
        <!--/span-->
        <div class="span12" id="content">
            <div class="row-fluid">
                <div class="navbar">
                    <div class="navbar-inner">
                        <ul class="breadcrumb">
                            <i class="icon-chevron-left hide-sidebar">
                                <a href='#' title="Hide Sidebar" rel='tooltip'>&nbsp;</a>
                            </i>
                            <i class="icon-chevron-right show-sidebar" style="display:none;">
                                <a href='#' title="Show Sidebar" rel='tooltip'>&nbsp;</a>
                            </i>
                            <li>
                                <a href="${ctx}/map/list">航道地图</a> <span class="divider">|</span>
                            </li>
                            <li>
                                <a href="${ctx}/navigation/list">航标列表</a> <span class="divider">|</span>
                            </li>
                            <li class="active">
                                用户列表
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span12">
                    <!-- block -->
                    <div class="block">
                        <div class="navbar navbar-inner block-header">
                            <%--<div class="muted pull-left">Users</div>--%>
                            <div class="pull-left"><%--<span class="badge badge-info">1,234</span>--%>
                                <a href="#myModal" data-toggle="modal" class="btn btn-primary">添加用户</a>
                                <button class="btn btn-primary" type="button">修改密码</button>
                            </div>
                        </div>
                        <div class="block-content collapse in">
                            <table class="table table-striped" style="margin-bottom: 0px;">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>机构</th>
                                </tr>
                                </thead>
                                <tbody>

                                <c:forEach items="${list}" var="user">
                                    <tr>
                                        <td>1</td>
                                        <td>${user.id}</td>
                                        <td>${user.name}</td>
                                        <td>${user.agencyName}</td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                            <div class="row">
                                <div class="span6">
                                </div>
                                <div class="span6">
                                    <div class="dataTables_paginate paging_bootstrap pagination">
                                        <ul>
                                            <li class="prev disabled">
                                                <a href="#">← 上一页</a>
                                            </li>
                                            <li class="active">
                                                <a href="#">1</a>
                                            </li>
                                            <li>
                                                <a href="#">2</a>
                                            </li>
                                            <li>
                                                <a href="#">3</a>
                                            </li>
                                            <li>
                                                <a href="#">4</a>
                                            </li>
                                            <li>
                                                <a href="#">5</a>
                                            </li>
                                            <li class="next">
                                                <a href="#">下一页 → </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /block -->
                </div>
            </div>
        </div>
    </div>
    <hr>
</div>
<footer>
    <p>&copy; eric 2015</p>
</footer>

<div class="container">
    <div id="myModal" class="modal hide span12" aria-hidden="true" style="display: none;left: 100px;">
        <div class="modal-header">
            <button data-dismiss="modal" class="close" type="button">×</button>
            <h3> 添加用户</h3>
        </div>
        <div class="modal-body">
            <%--  <p>Modal Example Body</p>--%>
            <div class="row-fluid">
                <div class="span5">
                    <!-- block -->
                    <div class="block">
                        <div class="navbar navbar-inner block-header">
                            <div class="muted pull-left">部门</div>
                        </div>
                        <div class="block-content collapse in">
                            <div class="span6">
                                <div id="treeDemo" class="ztree"></div>
                            </div>
                        </div>
                    </div>
                    <!-- /block -->
                </div>
                <div class="span7">
                    <!-- block -->
                    <div class="block">
                        <div class="navbar navbar-inner block-header">
                            <div class="muted pull-left">用户基本信息</div>
                        </div>
                        <div class="block-content collapse in">
                            <div class="span6">

                                <form class="form-horizontal">
                                    <fieldset>
                                       <%-- <legend>认真填写用户信息</legend>--%>

                                        <div class="control-group success">
                                            <label class="control-label" for="inputError">名称</label>

                                            <div class="controls">
                                                <input type="text" id="inputError">
                                                <span class="help-inline">Woohoo!</span>
                                            </div>
                                        </div>

                                        <div class="control-group success">
                                            <label class="control-label" for="inputError">登录名</label>

                                            <div class="controls">
                                                <input type="text" id="inputError">
                                                <span class="help-inline">Woohoo!</span>
                                            </div>
                                        </div>

                                        <div class="control-group success">
                                            <label class="control-label" for="inputError">密码</label>

                                            <div class="controls">
                                                <input type="text" id="inputError">
                                                <span class="help-inline">Woohoo!</span>
                                            </div>
                                        </div>

                                        <div class="control-group success">
                                            <label class="control-label" for="inputError">确认密码</label>

                                            <div class="controls">
                                                <input type="text" id="inputError">
                                                <span class="help-inline">Woohoo!</span>
                                            </div>
                                        </div>

                                        <div class="form-actions">
                                            <button type="submit" class="btn btn-primary">提交</button>
                                        </div>
                                    </fieldset>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- /block -->
                </div>
            </div>
        </div>
        <div class="modal-footer">
            </div>
    </div>
</div>
<!--/.fluid-container-->
<script src="${ctx}/static/master/vendors/jquery-1.9.1.min.js"></script>
<script src="${ctx}/static/master/bootstrap/js/bootstrap.min.js"></script>
<script src="${ctx}/static/master/vendors/easypiechart/jquery.easy-pie-chart.js"></script>
<script src="${ctx}/static/master/assets/scripts.js"></script>

<%--<link rel="stylesheet" href="${ctx}/static/ztree/css/demo.css" type="text/css">--%>
<link rel="stylesheet" href="${ctx}/static/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${ctx}/static/ztree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="${ctx}/static/ztree/js/jquery.ztree.excheck-3.5.js"></script>

<script>
    var setting = {
        check: {
            enable: true,
            chkStyle: "radio",
            radioType: "level"
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };


    var zNodes = ${treeData};
    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    })
</script>

</body>

</html>